<template>
  <div class="h-100">
    <BasicTable @register="registerTable">
      <!-- 表格工具栏按钮-->
      <template #toolbar>
        <a-button type="primary" @click="openAddOption"> 新增选项 </a-button>
      </template>
      <!-- 注释 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                onClick: deleteOption.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <!-- 新增 -->
    <optionAdd @register="registerAdd" @add-option="addOption" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction, BasicColumn } from '@/components/Table';
  import { h, reactive, defineExpose, onMounted } from 'vue';
  import optionAdd from './optionAdd.vue';
  import { useModal } from '@/components/Modal';
  import { Checkbox, Radio } from 'ant-design-vue';
  import { QuestionOptionRequest, list } from '@/api/exam/questionOption';
  import { QuestionCategoryDO } from '@/api/exam/questionCategory';

  const [registerAdd, { openModal }] = useModal();

  let props = defineProps(['questionId']);

  onMounted(() => {
    console.log(props.questionId);
  });

  // 表格列
  const columns: BasicColumn[] = [
    {
      title: '选项',
      dataIndex: 'value',
      width: 20,
    },
    {
      title: '内容',
      dataIndex: 'label',
      width: 120,
    },
    {
      title: '是否正确',
      dataIndex: 'correct',
      width: 20,
      customRender: ({ record, index }) => {
        return h(Checkbox, {
          checked: record.correct == 1,
          onClick: ()=>{
            if (record.correct == 0) {
              record.correct = 1;
              optionList[index].correct = 1;
            }else{
              record.correct = 0;
              optionList[index].correct = 0;
            }
          }
        });
      },
      editable: true,

    },
  ];

  let optionList: QuestionOptionRequest[] | QuestionCategoryDO[] = reactive([]);
  function getOptionList(): Promise<QuestionOptionRequest[]> {
    return new Promise((resolve) => {
      resolve(optionList);
    });
  }

  // 表格
  const [registerTable, { reload }] = useTable({
    api: getOptionList,
    columns,
    // 表格配置:
    bordered: true, // 是否包含边框
    showIndexColumn: false, // 是否包含索引列
    // 表格操作按钮
    actionColumn: {
      width: 80, // 按钮列宽度
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
    pagination: false,
  });

  // 可用选项
  let availableOptionNos: string[] = reactive(['A', 'B', 'C', 'D']);

  // 新增选项
  function addOption(option: QuestionOptionRequest) {
    optionList.push(option);

    // 删除已使用的序号
    let delIdx = availableOptionNos.indexOf(option.value);
    availableOptionNos.splice(delIdx, 1);
    reload();
  }

  // 删除选项
  function deleteOption(record: Recordable) {
    let delIdx = optionList.findIndex((item) => item.value == record.value);
    optionList.splice(delIdx, 1);

    // 归还序号, 并重新排序
    availableOptionNos.push(record.value);
    availableOptionNos.sort();

    // 重新加载表格
    reload();
  }

  function openAddOption() {
    // 选项数量
    const optionsLength = 4;

    if (availableOptionNos.length < optionsLength) {
      let lastCharCode: number = availableOptionNos[availableOptionNos.length - 1].charCodeAt(0);
      for (let i = 1; i <= optionsLength - availableOptionNos.length; i++) {
        availableOptionNos.push(String.fromCharCode(lastCharCode + i));
      }
    } else if (availableOptionNos.length > optionsLength) {
      for (let i = 1; i <= availableOptionNos.length - optionsLength; i++) {
        availableOptionNos.pop();
      }
    }

    // 打开新增面板
    openModal(true, {
      seqNos: availableOptionNos,
    });
  }

  // 对外暴露数据
  defineExpose({ data: optionList, initOptions, clearOptions });

  function initOptions(questionId: number) {
    optionList.splice(0, optionList.length);
    list({ questionId }).then((data) => {
      for (let item of data) {
        optionList.push(item);
      }
      reload();
    });
  }
  function clearOptions() {
    optionList.splice(0, optionList.length);
    reload();
  }
</script>
